import { defineComponent, ref } from "vue";
import styles from './styles.module.css';
import { getUserInfo } from "@/utils/ipc";
import { cache, showToast } from "@/utils/utils";
import HttpRepositiry from "@/repositorys/HttpRepositiry";
import { useAccount } from "@/stores/account";


export default defineComponent({
    setup(_props, _ctx) {
        const accountSrore = useAccount();

        const checkStatus = async () => {
            if (!accountSrore.own.length) {
                return;
            }
            const uids = accountSrore.own.map((item) => item.uid);
            const res = await HttpRepositiry.checkStatus({
                uids
            });
            if (res.status == 200) {
                const body = res.data.body || [];
                body.forEach((u) => {
                    const index = accountSrore.own.findIndex((item) => item.uid == u.uid);
                    accountSrore.own[index].expireTime = u.expireTime;
                });
            }
        }

        checkStatus();
        return () => {
            return (
                <div class={styles.app}>
                    <div >
                        <el-button size="small" type="primary" onClick={async () => {
                            const info = await getUserInfo();
                            accountSrore.addOwn(info);
                        }}>添加账号</el-button>

                        <span class="app-text">&nbsp;&nbsp;请勿添加主播账号，否则直播间会掉线!</span>
                    </div>
                    <div class="app-divider-5"></div>

                    <div class={[styles.app]}>
                        <el-table
                            size="small"
                            border
                            data={accountSrore.own}
                            stripe={true}
                            height="200"
                            style="width: 100%;"
                        >

                            <el-table-column
                                prop="date"
                                width="45"
                                label="序号">
                                {(item: any) => {
                                    return item.$index + 1;
                                }}
                            </el-table-column>
                            <el-table-column
                                label="账号"
                            >
                                {(item: any) => {

                                    return (
                                        <p class={styles.text}>{item.row.nick}</p>
                                    );
                                }}
                            </el-table-column>
                            <el-table-column
                                width="80"
                                label="状态">
                                {(item: any) => {
                                    const expireTime = item.row.expireTime;
                                    const now = Math.floor(Date.now() / 1000);
                                    return (
                                        <p class={styles.text}>{expireTime <= now ? '过期' : '正常'}</p>
                                    );
                                }}
                            </el-table-column>
                            <el-table-column
                                width="50"
                                label="操作">
                                {(item: any) => {
                                    return (
                                        <el-button size="small" link type="danger" onClick={() => {
                                            accountSrore.delOwn(item.$index);
                                        }}>删除</el-button>
                                    );
                                }}
                            </el-table-column>
                        </el-table>
                        <div class="app-divider-10"></div>
                        <div>
                            <el-button size="small" type="primary" onClick={async () => {
                                checkStatus();
                            }}>检测状态</el-button>
                            <el-button size="small" type="primary" onClick={async () => {
                                if (!accountSrore.isOwn) {
                                    return showToast('请添加两个账号后再启动');
                                }
                                for (let i = 0, len = accountSrore.own.length; i < len; i++) {
                                    const expireTime = accountSrore.own[i].expireTime;

                                    const now = Math.floor(Date.now() / 1000);
                                    if (expireTime <= now) {
                                        return showToast(`账号${i + 1}已过期`);
                                    }
                                }
                                cache.set('__is_main__', true);
                                window.api.restrt();
                            }}>启动软件</el-button>
                            <span class="app-text">&nbsp;&nbsp;请添加两个账号后再启动软件</span>
                        </div>
                    </div>


                </div >
            );
        }
    },
});


